<template>
  <div>
    <!-- 头部 -->
    <div class="add-nav">
      <span @click="goback" class="nav-1">取消</span>
      <span class="nav-2">发布句子</span>
      <span class="nav-3">草稿</span>
      <span @click="goto" class="nav-4">
        <router-link to="/mysend"> 发布 </router-link>
      </span>
    </div>
    <!-- 图片区 -->
    <div class="add-pic">
      <div class="pic">
        <input type="file" @change="UploadImg" />
        <img src="../assets/imgs/点击上传图片.jpg" alt="" />
        <!-- <img :src="`${ImgUrl}`" alt="" /> -->
        <!-- <span>点击选择图片</span> -->
      </div>
    </div>
    <!-- 添加内容区 -->
    <div class="add-content">
      <!-- <input type="text" placeholder="你推荐的句子，不多于100字" /> -->
      <textarea v-model="v1" placeholder="你推荐的句子，不多于100字"></textarea>
    </div>
    <!-- 添加作者 -->
    <div class="add-author">
      <input v-model="v2" type="text" placeholder="作者(可写)" />
    </div>
    <!-- 文案来自哪里 -->
    <div class="add-from">
      <input v-model="v3" type="text" placeholder="出自(可写)" />
    </div>
    <p class="add-p">添加作者和出处，句子能获得更多曝光哟!</p>
  </div>
</template>
<script>
export default {
  name: "myAddtxt",
  data() {
    return {
      v1: "", //内容
      v2: "", //作者
      v3: "", //作品出自
      ImgUrl: "", //base64
      allData: [],
    };
  },
 
  methods: {
    //   图片上传，有点难搞
    UploadImg(e) {
      let data = e.target.files[0];
      let fr = new FileReader();
      fr.readAsDataURL(data);
      // 注意function他是有this的
      fr.onloadend = (e) => {
        this.ImgUrl = e.target.result;
        document.querySelector("img").src = this.ImgUrl;
      };
      // console.log("图片base===>", this.ImgUrl);
    },

    goto() {
      let objData = {};
      objData.bsimg = this.ImgUrl;
      objData.bstxt = this.v1;
      objData.bsauthor = this.v2;
      objData.bsfrom = this.v3;
      this.allData.push(objData);
      console.log(this.allData);

      // console.log("所有数据", this.allData[0].bsimg);

      // 存值
      sessionStorage.setItem("AllSend", JSON.stringify(this.allData));
      // 有问题
      // location.reload();
    },
    goback() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
.add-nav {
  z-index: 99;
  width: 100%;
  height: 46px;
  background: #ffffff;
  position: fixed;
  left: 0;
  top: 0;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  .nav-1 {
    font-size: 16px;
  }
  .nav-2 {
    width: 165px;
    text-align: right;
  }
  .nav-3 {
    color: #7ab4ff;
    font-size: 16px;
  }
  .nav-4 {
    a {
      color: #7ab4ff;
      font-size: 16px;
    }
  }
}
// 图片区
.add-pic {
  margin-top: 62px;
  width: 100%;
  // margin: 62px auto 20px;
  .pic {
    width: 345px;
    height: 215px;
    border-radius: 6px;
    overflow: hidden;
    margin: 0 auto;
    background: #ccc;
    position: relative;
    span {
      display: inline-block;
      width: 100%;
      text-align: center;
      height: 22px;
      font-size: 22px;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      color: #fff;
      z-index: 1;
    }
    input {
      display: inline-block;
      // width: 100%;
      text-align: center;
      // height: 22px;
      font-size: 22px;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      opacity: 0;
    }
    img {
      width: 345px;
      height: 215px;
      object-fit: contain;
      z-index: 99;
    }
  }
}
// 添加内容区
.add-content {
  width: 345px;
  height: 120px;
  margin: 25px auto;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 0 3px rgb(214, 214, 214);

  textarea {
    width: 345px;
    height: 120px;
    background: rgb(255, 255, 255);
    box-sizing: border-box;
    border-radius: 10px;
    text-indent: 10px;
    line-height: 1.5;
    font-size: 16px;
    border: rgb(168, 168, 168);
  }
}
.add-author {
  width: 345px;
  height: 60px;
  margin: 0 auto;

  input {
    width: 345px;
    height: 35px;
    border-radius: 6px;
    overflow: hidden;
    padding: 0;
    background: rgb(255, 255, 255);
    box-shadow: none;
    /*聚焦input的蓝色边框*/
    outline: none;
    /*textarea 禁止拖拽*/
    resize: none;
    /*去除边框*/
    border: none;
    color: #ccc;
    box-shadow: 0 0 3px rgb(214, 214, 214);
    text-indent: 10px;
    &:-webkit-input-placeholder {
      border-color: #7ab4ff !important;
    }
    &:focus {
      // border: 0;
      border-color: rgb(51, 253, 0);
    }
  }
}
.add-from {
  width: 345px;
  height: 60px;
  margin: 0 auto;
  input {
    width: 345px;
    height: 35px;
    border-radius: 6px;
    overflow: hidden;
    padding: 0;
    box-shadow: none;
    /*聚焦input的蓝色边框*/
    outline: none;
    /*textarea 禁止拖拽*/
    resize: none;
    /*去除边框*/
    border: none;
    color: #ccc;
    box-shadow: 0 0 3px rgb(214, 214, 214);
    text-indent: 10px;
    &:-webkit-input-placeholder {
      border-color: #7ab4ff !important;
    }
    &:focus {
      // border: 0;
      border-color: rgb(51, 253, 0);
    }
  }
}
.add-p {
  width: 80%;
  height: 30px;
  line-height: 30px;
  color: #7ab4ff;
  font-size: 14px;
  margin: 0 auto;
  text-align: center;
}
</style>